<template>
    <div class="content">
        <div class="left-section">
            <!-- 物种多样性 -->
            <ShannonWienerTrend class="LeftItem"/>
            <RaiTrend class="LeftItem"/>
        </div>
        <div class="right-section">
            <!-- 物种列表 -->
            <TypesTrend class="RightItem"/>
            <Top5Trend class="RightItem"/>
        </div>
        <Center class="center-content"/>
        <div class="tech-label">
            <div class="tech-label-content">
                基于红外相机观测数据的统计分析
            </div>
            <div class="tech-corner tech-corner-tl"></div>
            <div class="tech-corner tech-corner-tr"></div>
            <div class="tech-corner tech-corner-bl"></div>
            <div class="tech-corner tech-corner-br"></div>
        </div>
    </div>
</template>

<script>
    import ShannonWienerTrend from '@/components/SpeciesStatisticsAuto/ShannonWienerTrend.vue'
    import TypesTrend from '@/components/SpeciesStatisticsAuto/TypesTrend.vue'
    import RaiTrend from '@/components/SpeciesStatisticsAuto/RaiTrend.vue'
    import Top5Trend from '@/components/SpeciesStatisticsAuto/Top5Trend.vue'
    import Center from '@/components/SpeciesStatisticsAuto/Center.vue'
    import {EventBus} from "../utils/event-bus";
    export default {
        components: {
            Center,
            ShannonWienerTrend,
            TypesTrend,
            RaiTrend,
            Top5Trend
        },
        data() {
            return {
                position:{lon:121.444162, lat:31.147243,zoom:16.35}
            }

        },
        mounted() {
            EventBus.$emit('set-position', this.position);
        }
    }
</script>
<style lang="scss" scoped>
    .tech-label {
        position: absolute;
        left: 53px;
        top: 100px;
        padding: 12px 20px;
        background: rgba(0, 20, 40, 0.7);
        border: 1px solid rgba(0, 255, 255, 0.5);
        color: #00f0ff;
        font-family: 'Arial', sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(0, 240, 255, 0.7);
        box-shadow: 0 0 10px rgba(0, 200, 255, 0.3);
        border-radius: 2px;
        transform: perspective(500px) rotateX(5deg);
        overflow: hidden;
        z-index: 100;
    }

    .tech-label-content {
        position: relative;
        z-index: 2;
    }

    .tech-corner {
        position: absolute;
        width: 10px;
        height: 10px;
        border-color: #00f0ff;
        border-style: solid;
        border-width: 0;
        z-index: 1;
    }

    .tech-corner-tl {
        top: 0;
        left: 0;
        border-top-width: 2px;
        border-left-width: 2px;
    }

    .tech-corner-tr {
        top: 0;
        right: 0;
        border-top-width: 2px;
        border-right-width: 2px;
    }

    .tech-corner-bl {
        bottom: 0;
        left: 0;
        border-bottom-width: 2px;
        border-left-width: 2px;
    }

    .tech-corner-br {
        bottom: 0;
        right: 0;
        border-bottom-width: 2px;
        border-right-width: 2px;
    }

    .tech-label::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #00f0ff, transparent);
        animation: scanline 3s linear infinite;
    }

    @keyframes scanline {
        0% {
            top: 0;
            opacity: 0.5;
        }
        50% {
            opacity: 1;
        }
        100% {
            top: 100%;
            opacity: 0.5;
        }
    }


    .content{
        display: flex;
        justify-content: center;
    }
    .left-section,.LeftItem{
        width: 900px;
    }
    .right-section,.RightItem{
        width: 900px;
    }
    .left-section{
        margin-top: 70px;
    }
    .right-section{
        margin-left: 20px;
        margin-top: 70px;
    }
    .center-content{
        position: absolute;
        bottom: 10px;
    }
</style>